<template>
  <div id="examineflow">
    <div class="background">
      <div class="top">登记办件基本信息</div>
      <div class="step">
        <el-steps :space="400" :align-center="true" :active="3" finish-status="success">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step title="步骤 3"></el-step>
          <el-step title="步骤 4"></el-step>
        </el-steps>
      </div>
      <div class="step-con step1">
        <div class="steptit">填写基本信息</div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn">
        <span class="nullbtn">暂存</span>
        <span>下一步</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { getStepOne } from '@/api/examine/examineFlow';
  export default {
    name: 'ExamineFlow',
    data() {
      return {
        form: {
          name: '123',
          region: ''
        }
      };
    },
    mounted() {
      this.getStepOne();
    },
    methods: {
      async getStepOne() {
        const data = await getStepOne({ args: ['0445afbea81b11eba668a019b29001bd', '1'] });
        if (data.data.code === 200) {
          console.log(data.data);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  #examineflow {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    .background {
      width: 90%;
      height: 90%;
      border-radius: 20px;
      background-color: #ffffff;
      transform: translateX(5%) translateY(5%);
      .top {
        height: 83px;
        line-height: 83px;
        padding-left: 40px;
        font-size: 24px;
        font-weight: bold;
        border-bottom: 1px solid $bordercolor;
      }
      .step {
        padding-top: 20px;
      }
      .el-steps {
        justify-content: center;
      }
      .btn {
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 60px;
        span {
          margin: 0 10px;
          display: inline-block;
          width: 200px;
          height: 48px;
          background: linear-gradient(90deg, #00b9ff 0%, #1e87ff 100%);
          opacity: 1;
          text-align: center;
          line-height: 48px;
          color: #ffffff;
          font-size: 16px;
          border-radius: 5px;
          cursor: pointer;
        }
        .nullbtn {
          height: 46px;
          background: #ffffff;
          color: $blue;
          border: 1px solid $blue;
        }
      }
      .step-con {
        padding-left: 40px;
        .steptit {
          font-size: 20px;
          font-weight: bold;
          padding-top: 30px;
        }
        .el-form-item {
          margin-top: 10px;
          display: inline-block;
          margin-right: 20px;
        }
      }
    }
  }
</style>
